import {useRequest} from '@umijs/hooks'
import {Descriptions, Drawer, message, Spin, Tag} from 'antd'
import React, {useEffect, useState} from 'react'
import Zmage from 'react-zmage'
import {getOriginString} from '../../../../../utils/encrypt'
import getImgInfo from '../../../../../utils/getImgInfo'
import {fetchRequest} from '../../../../../utils/Request'
import {url} from '../../../../../utils/url'
import {
    DeleteOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    HddOutlined,
    LoadingOutlined,
    SearchOutlined,
    SyncOutlined
} from '@ant-design/icons'
import {useSingleState} from "nice-hooks";

interface RequestAddres {
    level: number,
    collegeId: string,
    collegeAreaId: string,
    building: string,
    unit: string,
    floor: string
}

interface PicInfo {
    fileStoreName: string,
    fileRealName: string
}

interface RequestParams {
    "accessCardId": number,
    "addressId": string,
    state: number
}

// const type: any = {
//     告警: { text: "告警", color: "#fdec38" },
//     正常: { color: "#0ec671", text: "正常" },
//     危险: { color: "#f50206", text: "危险" },
//     未知: { color: undefined, text: "未知" },
//     科道接口调用失败: { color: undefined, text: "科道接口调用失败" }
// }

export default function StaffEntranceInfo(props: any) {


    const [detail, setdetail] = useState<any>()
    const [modifyAddressInfo, setmodifyAddressInfo] = useState<{ visible: boolean, content: any }>({
        visible: false,
        content: null
    })
    const [requestAddress, setRequestAddress] = useState<any>({
        "level": 0,
        "collegeId": "",
        "collegeAreaId": "",
        "building": "",
        "unit": "",
        "floor": ""
    })
    const [modifyInfo, setmodifyInfo] = useState<{ visible: boolean, content: any }>({visible: false, content: null})

    //请求获取用户的详情信息
    async function getEntranceDetail(params: RequestParams) {
        try {
            const json = await fetchRequest(url.GET_ACCESS_USER_DETAIL, params);
            if (json.success) {
                // console.log(json)
                setdetail(json.data[0])
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    const getDetail = useRequest(getEntranceDetail, {
        manual: true,
        loadingDelay: 200
    })

    //第一次进入时执行的函数
    useEffect(() => {

        const params: RequestParams = {
            accessCardId: props.content.accessCardId,
            addressId: props.content.addressId,
            state: props.content.state
        }

        getDetail.run(params)
    }, [])

    //得到显示字段
    function getDisplayItem(data: any) {
        if (data === "" || typeof data === "undefined" || data === null)
            return "--"
        return data
    }


    // const attachList = (props.content.attachmentInfo.map((item: PicInfo, index: number) => <img key={index} width="80" style={{ cursor: 'pointer' }} src={url.ATTACHMENT_URL + 'accessToken=' + cookie.load("deptToken") + '&storeName=' + item.fileStoreName} onClick={() => Zmage.browsing({ set: getImgSet(), defaultPage: index })} />))
    const [state, setState] = useSingleState({addressNode: "", content: ""});

    const getAllAddress = useRequest(getAllAddressNode, {
        manual: true,
        loadingDelay: 200
    })

    async function getAllAddressNode(params: RequestAddres) {
        try {
            const json = await fetchRequest(url.GET_ADDRESS_NODE, params);
            console.log("级联下拉菜单")
            console.log(json.data)
            if (json.success) {
                setmodifyAddressInfo({visible: true, content: {content: state.content, addressNode: json.data}})
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message)
        }
    }

    //得到图片的集合
    function getImgSet(imgList: PicInfo[]): any[] {
        const imgSet: any[] = [];

        imgList.map((item: PicInfo) => {
            imgSet.push({src: url.ATTACHMENT_URL + 'accessToken=' + getImgInfo(item.fileStoreName), alt: "加载错误"})
        })

        return imgSet
    }

    function showtmodifyAddress(info: any) {
        setState({content: info})
        getAllAddress.run(requestAddress)
    }

    //修改成功
    function modifyAddressSuccess() {
        console.log("modifyAddressSuccess")
        message.destroy();
        message.success("修改成功!")
        setmodifyInfo({...modifyAddressInfo, visible: false});
    }

    // //得到设备的信息
    // function getDevInfo(devList: any[]) {
    //     if (props.content.state === "2" || props.content.state === "3")
    //         return ""
    //     let data = "";
    //     devList.map(item => {
    //         data = data + item.devName + `(${item.devLocation})` + ";"
    //     })
    //
    //     return data
    // }
    return (
        <Spin spinning={getDetail.loading}>
            {detail === null || typeof detail === "undefined" ? null : <div>
                <Descriptions bordered title="门禁基本信息">
                    <Descriptions.Item label="姓名">{getDisplayItem(detail.studentName)}</Descriptions.Item>
                    <Descriptions.Item label="性别">{getDisplayItem(detail.sex)}</Descriptions.Item>
                    <Descriptions.Item label="联系电话">{getDisplayItem(detail.phone)}</Descriptions.Item>
                    <Descriptions.Item label="证件号码">{getDisplayItem(detail.certNum)}</Descriptions.Item>
                    {/*<Descriptions.Item label="校区" >{getDisplayItem(detail.deptName)}</Descriptions.Item>*/}
                    <Descriptions.Item label="宿舍地址">{getDisplayItem(detail.addressName)}</Descriptions.Item>
                    <Descriptions.Item label="编号">{getDisplayItem(detail.studentId)}</Descriptions.Item>
                    <Descriptions.Item label="入学时间">{getDisplayItem(detail.startSchoolDate)}</Descriptions.Item>
                    <Descriptions.Item label="毕业时间">{getDisplayItem(detail.graduationDate)}</Descriptions.Item>
                    <Descriptions.Item label="防疫核验">{<Tag
                        color={detail.healthCode.color}>{detail.healthCode === undefined || detail.healthCode === null ? "" : detail.healthCode.stateName}</Tag>}</Descriptions.Item>
                    <Descriptions.Item label="防疫核验更新时间">{getDisplayItem(detail.healthCode.date)}</Descriptions.Item>
                    <Descriptions.Item label="照片"
                                       span={2}>{detail.photo === null || typeof detail.photo === "undefined"|| detail.photo==="" ? null :
                        <img width="80"
                             src={url.GET_PERSON_FACE_URL + 'accessToken=' + getImgInfo(detail.photo)}
                             style={{cursor: 'pointer'}}
                             onClick={() => Zmage.browsing({src: url.GET_PERSON_FACE_URL + 'accessToken=' + getImgInfo(detail.photo)})}/>}</Descriptions.Item>

                </Descriptions>

                <br/>

                <br/>

                <Descriptions bordered title="门禁信息">
                    <Descriptions.Item label="开门方式">
                        <Tag color="blue"
                             style={detail.openType.openType.face ? undefined : {display: 'none'}}>人脸开门</Tag>
                        <Tag color="blue"
                             style={detail.openType.openType.whiteCard ? undefined : {display: 'none'}}>{"白卡开门(卡号:" + detail.openType.openType.whiteCardCode + ")"}</Tag>
                        <Tag color="blue"
                             style={detail.openType.openType.blackCard ? undefined : {display: 'none'}}>{"翼卡通开门(卡号:" + detail.openType.openType.blackCardCode + ")"}</Tag>
                    </Descriptions.Item>
                </Descriptions>

                <br/>
                <br/>
                {/*<Descriptions bordered title="宿舍地址修改">*/}
                {/*<Descriptions.Item label="宿舍地址修改">*/}
                {/*<Tag color="#f50"*/}
                {/*onClick={e => {showtmodifyAddress(detail)}} icon={<DeleteOutlined />}>修改</Tag>*/}
                {/*</Descriptions.Item>*/}
                {/*</Descriptions>*/}

                {/*<Drawer width="60%" title="更换宿舍" destroyOnClose visible={modifyAddressInfo.visible} onClose={() => setmodifyAddressInfo({ ...modifyAddressInfo, visible: false })}>*/}
                {/*<ModifyStduentAddressEntrance />*/}
                {/*</Drawer>*/}
                {/*
            <br/>

            <Button>修改</Button> */}

                {/* <Descriptions title="门禁信息" bordered>
                <Descriptions.Item label="门禁有效期">任伟</Descriptions.Item>
                <Descriptions.Item label="开门方式">白卡</Descriptions.Item>
            </Descriptions> */}
            </div>}


        </Spin>
    )
}
